import 'dart:developer';

import 'package:FlutterDemo/bean/beans_factory.dart';
import 'package:flutter/material.dart';

/// 自定义Scrollbar
/// 通过Stack 组件将ListView 和自定义的滚动条进行叠加显示：
class SampleMyScrollbarWidget extends StatefulWidget {
  const SampleMyScrollbarWidget({Key? key}) : super(key: key);

  @override
  _SampleMyScrollbarWidgetState createState() =>
      _SampleMyScrollbarWidgetState();
}

class _SampleMyScrollbarWidgetState extends State<SampleMyScrollbarWidget> {
  List<String> _list = BeansFactory.instance.buildSampleGankioGirList();

  // 偏移的位置
  double _aligmentY = 0.0;

  /// 处理滑动监听
  /// 通过ScrollNotification 获取当前滚动组件最大滚动距离和当前滚动位置，其中
  /// metrics.maxScrollExtent 表示当前滚动组件最大滚动距离，metrics.pixels 表示
  /// 当前滚动位置。
  bool _handleScrollNotification(ScrollNotification notification) {
    final ScrollMetrics metrics = notification.metrics;
    log("滚动组件最大滚动距离:${metrics.maxScrollExtent}");
    log("当前滚动位置:${metrics.pixels}");
    setState(() {
      // 更新偏移量
      _aligmentY = -1 + (metrics.pixels / metrics.maxScrollExtent) * 2;
    });
    return true;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _aligmentY = 0.0;
  }

  @override
  Widget build(BuildContext context) {
    /// 实现自定义滚动条组件首先需要监听滚动组件滚动的位置，使用NotificationListener 监听滚动的位置
    /// 使用NotificationListener监听listview滚动
    return NotificationListener(
      onNotification: _handleScrollNotification,
      // child: buildListView()
      child: Container(
        padding: EdgeInsets.only(top: 20, bottom: 20),
        child: Stack(
          alignment: Alignment.topRight, //顶部右对齐
          children: [
            // 列表
            buildListView(),
            // scrollbar
            // buildMyScrollbar()
            buildCircleScrollbar()
          ],
        ),
      ),
    );
  }

  /// 构建list列表
  ListView buildListView() {
    return ListView.builder(
      reverse: false,
      itemBuilder: (context, index) {
        return Card(
          child: Container(
            height: 220,
            decoration: BoxDecoration(
                // 构建圆角
                borderRadius: BorderRadius.circular(12),
                image: DecorationImage(
                    image: NetworkImage(_list[index]), fit: BoxFit.cover)),
          ),
        );
      },
      itemCount: _list.length,
    );
  }

  buildMyScrollbar() {
    return Container(
      alignment: Alignment(1, _aligmentY),
      padding: EdgeInsets.only(right: 5),
      child: Container(
        height: 100,
        width: 20,
        color: Colors.redAccent,
      ),
    );
  }

  buildCircleScrollbar() {
    return Container(
      alignment: Alignment(1, _aligmentY),
      padding: EdgeInsets.only(right: 5),
      child: Container(
          height: 60,
          width: 18,
          decoration: BoxDecoration(
              // 矩形
              shape: BoxShape.rectangle,
              // 控制圆角
              borderRadius: BorderRadius.all(Radius.circular(20)),
              color: Colors.blueGrey, // 可以用颜色，也可以用图片
              image: DecorationImage(
                  image: AssetImage("assets/images/scrollbar_test.jpg"),
                  fit: BoxFit.fill) // 本地图片,可以设置一个好的图片
              ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.arrow_drop_up,
                size: 18,
              ),
              Icon(
                Icons.arrow_drop_down,
                size: 18,
              ),
            ],
          )),
    );
  }
}
